<!--
 * @Author: “张矗” “1279074338@qq.com”
 * @Date: 2023-11-08 23:06:31
 * @LastEditors: “张矗” “1279074338@qq.com”
 * @LastEditTime: 2023-11-09 21:38:11
 * @FilePath: \pn\src\views\zhangchu\AddressSelection\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div style="background-color: aliceblue; height:20rem;">
        <div class="Selective-navigation">
            <div style="margin-left: .3rem; width: 10%; line-height: 1.5rem;" @click="retreat">
                <van-icon class-prefix="icon" name="zuojiantou"></van-icon>
            </div>
            <div style="width:90%;">
                <van-search v-model="value" placeholder="请输入搜索关键词" style="height: 1.3rem; margin: .1rem;"  />
            </div>
        </div>

        <div>
            <van-index-bar :index-list="indexList">
                <van-index-anchor index="1">定位/搜索</van-index-anchor>

                <div class="address-box">
                    <van-cell v-for="item in iscountries" :title="item.name" @click="redirectToOtherPage(item.name)" />
                </div>
            </van-index-bar>
        </div>
    </div>
</template>
<script>
import { Myiscountries, } from '../../../api/zhangchu/zhangchuAPI/AddressSelection';
export default {
    data() {
        return {
            show: false,
            iscountries: [],
            value: "",
            //地址
            names: "",
            indexList: ['历史', '热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',]
        };
    },

    created() {
        this.iscountriesAPI()
    },

    methods: {

        async iscountriesAPI() {
            let { data } = await Myiscountries()
            console.log(data)
            this.iscountries = data
        },


        //后退
        retreat() {
            this.$router.go(-1);
        },
        //点击显示
        showPopup() {
            this.show = true;
        },
        //取消隐藏
        addshow() {
            this.show = false;
        },

        // 选择页面 根据路由传参区分
        redirectToOtherPage(name) {
            if (this.$route.query.start == "start") {
                sessionStorage.setItem("name", name);
                this.$router.push('/TrainTicket');
            } else {
                sessionStorage.setItem("names", name);
                this.$router.push('/TrainTicket');
            }

        }
    }
}
</script>

<style scoped>
.Selective-navigation {
    height: 1.5rem;
    font-size: .5rem;
    display: flex;
    justify-content: space-evenly;
    background-color: aqua;
}

.address-box {
    height: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 1rem 0 1rem;
}

.van-cell {
    width: 1.8rem;
    height: 1rem;
    text-align: center;
    margin: .1rem .3rem .2rem 0;
    background-color: rgb(255, 255, 255);
}
</style>